import { DIST, COMP } from '../config/canvasConfig'

export type IContext = CanvasRenderingContext2D & { to: (x: number, y: number) => IContext }

export interface IStart {
	x: number
	y: number
}

export const drawLine_two = (ctx: IContext, { x, y }: IStart) => {
	// main
	ctx.lineWidth = 4
	ctx.strokeStyle = '#073bca'
	ctx.beginPath()
	ctx.moveTo(x, y)

	const x1 = x + 40, y1 = y - 40
	const x2 = x1 + 30
	const x3 = x2 + 45, y2 = y1 + 45
	const x4 = x3 + Math.ceil(Math.random() * 50) + 50
	ctx.to(x1, y1)
		.to(x2, y1)
		.to(x3, y2)
		.to(x4, y2)

	ctx.closePath()
	ctx.stroke()
	//upper
	ctx.lineWidth = 2
	ctx.strokeStyle = 'gray'
	ctx.beginPath()
	ctx.moveTo(x - COMP, y - DIST)
	ctx.to(x1 - COMP, y1 - DIST)
		.to(x2 + COMP, y1 - DIST)
		.to(x3 + COMP, y2 - DIST)
		.to(x4 - COMP, y2 - DIST)

	ctx.closePath()
	ctx.stroke()
	//  under
	ctx.lineWidth = 2
	ctx.strokeStyle = 'gray'
	ctx.beginPath()
	ctx.moveTo(x + COMP, y + DIST)
	ctx.to(x1 + COMP, y1 + DIST)
		.to(x2 - COMP, y1 + DIST)
		.to(x3 - COMP, y2 + DIST)
		.to(x4 + COMP, y2 + DIST)

	ctx.closePath()
	ctx.stroke()

	return Promise.resolve({ x: x4, y: y2 })
}